<template>
  <div>
    <van-nav-bar fixed placeholder title="我的" :border="false" custom-style="background: transparent" />

    <div class="bg"></div>

    <div class="profile">
      <image class="avatar" src="/package-guest/static/me/avatar.png" />
      <div class="right">
        <div class="name">
          {{ nickname }}
        </div>
        <div class="phone">
          {{ mobile }}
        </div>
      </div>
    </div>

    <div class="main">
      <div class="menus">
        <div v-for="menu in menus" :key="menu.name" class="menu" @click="handleClick(menu.name)">
          <div class="left">
            <image class="icon" :src="`/package-guest/static/me/${menu.name}.png`" />
            <span>{{ menu.title }}</span>
          </div>
          <div v-if="menu.name === 'contact'" @click="callMe">
            {{ menu.phone }}
          </div>
          <image v-if="menu.name === 'about'" class="right" src="/package-guest/static/me/arrow-right.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { CHANGE_GUEST_TAB, emitter } from '@/utils/emitter'
export default {
  data() {
    return {
      menus: [
        { name: 'contact', title: '联系我们', phone: '025-83115836' },
        { name: 'about', title: '关于我们' },
      ],
    }
  },
  computed: {
    nickname() {
      return this.$store.getters.nickname
    },
    mobile() {
      return this.$store.getters.mobile
    },
  },
  methods: {
    callMe() {
      uni.makePhoneCall({
        phoneNumber: '025-83115836',
      })
    },
    handleClick(name) {
      switch (name) {
        case 'contact':
          // TODO:
          break
        case 'about':
          emitter.emit(CHANGE_GUEST_TAB, name)
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.bg {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 135px;
  background: rgba(107,197,223,0.4);
  filter: blur(30px);
}

.profile {
  padding-left: 25px;
  padding-bottom: 8px;
  display: flex;
  column-gap: 15px;
  .avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
  }
  .right {
    padding: 7px 0;
    color: #000000;
    .name {
      font-size: 16px;
      font-weight: 500;
      line-height: 16px;
    }
    .phone {
      margin-top: 8px;
      font-size: 12px;
      line-height: 12px;
      font-weight: 400;
    }
  }
}

.main {
  padding: 10px 15px;

  .menus {
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    border-radius: 2px;

    .menu {
      padding: 14px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .left {
        display: flex;
        align-items: center;
        color: #333;
        .icon {
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
      }
      .right {
        width: 16px;
        height: 16px;
      }

      &:nth-child(n+2)::after {
        content: '';
        display: block;
        background-color: #f2f2f2;
        height: 1px;
        position: absolute;
        top: 0;
        left: 10px;
        right: 10px;
      }
    }
  }
}
</style>
